import React,{Fragment} from 'react';
import { sortable } from 'react-sortable';
import Item from './Item';


class SortableList extends React.Component {

    state = {
      items: [
        "Gold",
        "Crimson",
        "Hotpink",
        "Blueviolet",
        "Cornflowerblue",
        "Skyblue",
        "Lightblue",
        "Aquamarine",
        "Burlywood"
      ]
    };
  
    onSortItems = (items) => {
      this.setState({
        items: items
      });
    }
  
    render() {
      var SortableItem = sortable(Item);
      const { items } = this.state;
      var listItems = items.map((item, i) => {
        return (
          <SortableItem
            key={i}
            onSortItems={this.onSortItems}
            items={items}
            sortId={i}>{item}</SortableItem>
        );
      });
  
      return (
        <ul className='sortable-list'>
          {listItems}
        </ul>
      )
    }
  };

  export default SortableList;